<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3_background</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
			padding: 50px 10px;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
		}
		
	</style>
	<style class='classroom'>
		section{
			position: relative;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
        	color:#0072FF;
		}
		body{
	            height: 2000px;
	        }
	    .example div{
            width:500px;
            height: 300px;
            /*background-image: url("img/bg.jpg");
            background-repeat:  no-repeat;
            background-color: #ddd;
            background-position: -200px -100px;*/
            margin: 50px auto;
            border: 1px solid blue;
            /*推荐用复合属性*/
            background:#ddd url("img/bg.jpg") no-repeat center center/100% 100% fixed;
        }
        .example div.box1{
        	 background:url('img/bg2.jpg') no-repeat;
	         background-attachment: fixed;
        }
        .exa1{
        	width: 100%;
            height: 300px;
            background: url("img/bg.jpg") no-repeat center;
            /*background-size: 300px 150px;*/
            /*background-size: 50% 50%;*/
            /*background-size: cover;*/
            background-size: contain;
        }
        .exa2 div{
            width: 1350px;
            height: 300px;
            /*background: url("img/top1.jpg") -700px 0 ;*/
            background:url("img/top2.png") no-repeat 0px 130px , url("img/top1.jpg") 1350px 0;
            border: 1px dashed purple;
            margin: 80px auto;
        }
        .exa3 div{
        	width:500px;
            height: 500px;
            padding:50px;
            margin: 100px auto;
            border: 20px dashed pink;
            box-shadow: 0 0 10px #000;
            
            background: url("img/move.gif") no-repeat;
            background-origin:border-box;
            /*background-origin:padding-box;*/
            /*background-origin:content-box;*/

            /*background-clip: content-box;*/
            background-clip: padding-box;
        }
        .exa4 div{
        	width:300px;
            height: 150px;
            margin: 100px auto;
            border: 1px dashed red;
            /*opacity:0.5;  div里面所有的都透明 */
            color: blue;
            background-color:rgba(0,0,0,0.1); /* 只是颜色透明  */
        }
        .exa5 div{
            width:300px;
            height: 150px;
            margin: 100px auto;
            border: 1px dashed red;
        }
        .exa6 div{
        	height: 500px;
        	 overflow: hidden;
            /*background:
                -webkit-linear-gradient(
                    top, !*4个方向 *!
                    red 20%,
                    black 50%,
                    yellow 100%
            );*/
            background:
                -webkit-linear-gradient(90deg,red 20%,black 50%,yellow 100%);
        }
        .exa7 div{
        	width:300px;
            height: 150px;
            margin: 100px auto;
            border: 1px dashed red;
        }
        .exa8{
        	margin: 300px 0 0 0;
        }
       .exa8 div{
       		width: 400px;
            height: 400px;
            margin: 100px auto;
            background: -webkit-linear-gradient(
                0deg,
                greenyellow 5px,
                goldenrod 5px,
                rgba(0,0,0,0) 5px
                ),
                -webkit-linear-gradient(
                    90deg,
                    #3EFF6D 5px,
                    #3EFF6D 5px,
                    rgba(0,0,0,0) 5px
                );
            background-size:1em 1em;
       }
       .exa9 div{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            border: 1px dashed red;

        }
        .exa9 #box1{
            background: -webkit-radial-gradient(
                    center,
                    100px 50%,
                    red 30px,
                    blue 60px,
                    black 100%
            );
        }
        .exa9 #box2{
            background: -webkit-radial-gradient(
                    yellow ,
                    blue ,
                    black
            );
        }
        .exa9 #box3{
            background: -webkit-radial-gradient(
                    yellow 30px,
                    blue 60px,
                    black 100%
            );
        }
        .exa9 #box4{
            background: -webkit-radial-gradient(
                    purple,
                    gold,
                    green,
                    pink,
                    black,
                    blue,
                    purple,
                    gold,
                    green,
                    pink,
                    black,
                    blue
            );
        }
	</style>
</head>
<body>
	<header class="true">
		<h1>H5新增标签</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、CSS背景属性回顾</h4>
			<p>
				background-image
				background-color
				background-repeat
				background-position
				background-attachment 
				(srcoll默认值。背景图像会随着页面其余部分的滚动而移动。/fixed当页面的其余部分滚动时，背景图像不会移动。)
			</p>
			<h4>二、CSS3新增背景属性</h4>
			<p>
				1.设置背景尺寸  background-size 
				background-size:x y;		//水平 垂直；值可以为像素、百分比、auto等
				background-size:cover;	//保持宽高比不变，保证占满盒子，但是不一定能看到全部图
				background-contain;		//保持宽高比不变，保证看清全图，但是不一定占满盒子

				2.多背景  background-image
				background-image:url(1.jpg),url(2.jpg);	多个背景以逗号隔开，无限个数

				3.背景起始区域  background-origin
				background-origin:border-box;	//从border区域起始
				background-origin:padding-box;	//默认值，从padding区域起始 
				background-origin:content-box;	//从内容部分起始

				4.背景显示区域 background-clip
					background-clip:border-box;		//默认值，从border区域开始显示背景
					background-clip:padding-box;	//从padding区域开始显示背景
					background-clip:content-box;	//从内部区域开始显示背景
					text：前景内容的形状（比如文字）作为裁剪区域向外裁剪 （需加前缀）

				5.复合样式	background:bg-color bg-image position / bg-size bg-repeat bg-origin bg-clip bg-attachment  
			</p>
			 <h4>三、新增颜色与渐变色</h4>
			 <p>
		 	   1.新增颜色
			 	   	rgba，
			 	   		在rgb的基础上多了一个a透明度数值，取值范围0~1，
			 	   		0为完全透明，1为完全不透明 
			 	   	hsl，
			 	   		H：Hue(色调)。
			 	   			0(或360)表示红色，
			 	   			120表示绿色，
			 	   			240表示蓝色，也可取其他数值来指定颜色。
			 	   			取值为：0 – 360，
			 	   		S：Saturation(饱和度)。取值为：0.0% - 100.0%，
			 	   		L：Lightness(亮度)。取值为：0.0% - 100.0%。 

		 	   2.渐变色
			 	   线性渐变 linear-gradient()  从某个方位 渐变到某个方位
			 	   径向渐变 radial-gradient()  从某个点 向四周渐变
			 	   在使用时需要加上 –webkit-兼容前缀
			 	   IE低版本兼容filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
			 </p>
			<h4>四、Gradient</h4>
			<p>
				gradient可以应用在所有接受图像的属性上

				linear-gradient：		(线性渐变）	创建遮罩图像。
				radial-gradient：		(径向渐变)		创建遮罩图像。

				repeating-linear-gradient：	重复的(线性渐变)	创建背遮罩像。
				repeating-radial-gradient：	重复的(径向渐变)	创建遮罩图像。
			</p>
			<h4>五、linear-gradient(线性渐变）</h4>
			<p>
				linear-gradient( 角度，点，点，...) 能运用在所有的图片上

					起点：从什么方向开始渐变（顺时针）
					关键词：		
					to left：	设置渐变为从右到左。	相当于: 270deg
					to right：	设置渐变从左到右。	相当于: 90deg
					to top：	设置渐变从下到上。	相当于: 0deg
					to bottom（默认）：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。	

					对角渐变 to top left | to top right | to bottom right  | to bottom left
					 角度：从什么角度开始渐变，单位（deg）
					 点：渐变点的颜色和位置
							颜色 ：
							位置：%|px
								如：red 50%, blue 100%(红色从50%渐变到100%为蓝色)

					linear-gradient（30deg, red 10%, green 10%）

				多背景：background: url(a.jpg) 0 0, url(b.jpg) 0 100%;（逗号分开）

				带图片和透明度的渐变		

					background: linear-gradient(to right, rgba(255,255,255,0), 	rgba(255,255,255,1)),url(abc.jpg);

				兼容：
					-webkit-linear-gradient()
					-webkit-     	
					-moz-		

				 IE低版本渐变(滤镜)：
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',end	Colorstr='#ff0000',GradientType='1');

				线性渐变重复平铺: repeating-linear-gradient ()     
			</p>
			<h4>六、radial-gradient径向渐变</h4>
			<p>
				radial-gradient( shape [size ] at[position ],color 位置,color 位置，+)

					shape： circle（圆） |  ellipse （椭圆）
					shape size:  半径 
						圆形的半径圆只有一个值，椭圆有两个值，px  | 关键词 
						关键词：	closest-side：	圆心到最近的边
							closest-corner：	圆心到最近的角
							farthest-side：	圆心到离圆心最远的边
							farthest-corner(默认)：	圆心到离圆心最远的角

					position 确定圆心的位置，X坐标，Y纵坐标；如果只提供一个，第二值默认为50%，即center
						值：	关键词  px % 
							 X关键词 ：left：左   center：中 right：右
							 Y关键词 ：top：上  center：中  bottom：下


				radial-gradient(ellipse 100% 100% at 300px  300px, #f00 10%, #ff0 20%, #080 100%)

			    repeating-radial-gradient () 线性渐变重复平铺 
			</p>
			<h4>七、box-reflect 倒影</h4>
			<p>
				box-reflect：none | direction offset  mask-box-image

				direction: 倒影在对象的位置	  
						above	上  
						below	下  
						left	左  
						right	右

				offset:用长度值来定义倒影与对象之间的间隔,可以为负值
						length | percentage

				mask-box-image: 遮罩图像

					&#60;url&gt;：			使用绝对或相对地址指定遮罩图像。
					linear-gradient：		使用线性渐变创建遮罩图像。
					radial-gradient：		使用径向(放射性)渐变创建遮罩图像。
					repeating-linear-gradient：	使用重复的线性渐变创建背遮罩像。
					repeating-radial-gradient：	使用重复的径向(放射性)渐变创建遮罩图像。
					none：无遮罩图像

				<mark>MASKS遮罩/蒙版</mark>

				-webkit-mask-image 	遮罩图片
						：url('');
						linear-gradient
						radial-gradient
				  
				-webkit-mask-repeat	遮罩平铺
						repeat
						no-repeat
						repeat-x
						repeat-y

				-webkit-mask-position  	遮罩位置
						关键词 | % | length 

				-webkit-mask-size   	遮罩尺寸
						% | length
						
				参考网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask#浏览器兼容性
			</p>
		</article>
	</section>
	<section class='example'>
		<p>
			<strong>background回顾</strong>
			width:500px;
			height: 300px;
			/*background-image: url("img/bg.jpg");
			background-repeat:  no-repeat;
			background-color: #ddd;
			background-position: -200px -100px;*/
			margin: 50px auto;
			border: 1px solid blue;
			/*推荐用复合属性*/
			background:#ddd url("img/bg.jpg") no-repeat center center/100% 100% fixed;
		</p>
		<div></div>
		<div class="box1">background-attachment:fixed</div>
	</section>
	<section class="exa1">
		<p>
		<strong>background-size:</strong>
				width: 100%;
			    height: 300px;
			    background: url("img/bg.jpg") no-repeat center;
			    /*background-size: 300px 150px;*/
			    /*background-size: 50% 50%;*/
			    /*background-size: cover;*/
			    background-size: contain;
		</p>
	</section>
	<section class="exa2">
		<p>
			<strong>多背景</strong>
            width: 1350px;
            height: 300px;
            /*background: url("img/top1.jpg") -700px 0 ;*/
            background:url("img/top2.png") no-repeat 0px 130px , url("img/top1.jpg") 1350px 0;
            border: 1px dashed purple;
            margin: 80px auto;
		</p>
		<div></div>
	</section>
	<section class="exa3">
		<p>
			<strong>背景起始区域 background-origin</strong>
			<strong>背景显示区域 background-clip</strong>
			width:500px;
            height: 500px;
            padding:50px;
            margin: 100px auto;
            border: 20px dashed pink;
            box-shadow: 0 0 10px #000;
            
            background: url("img/move.gif") no-repeat;
            background-origin:border-box;
            /*background-origin:padding-box;*/
            /*background-origin:content-box;*/

            /*background-clip: content-box;*/
            background-clip: padding-box;
		</p>
		<div></div>
	</section>
	<section class="exa4">
		<p>
			<strong>rgba</strong>
			width:300px;
            height: 150px;
            margin: 100px auto;
            border: 1px dashed red;
            /*opacity:0.5;  div里面所有的都透明 */
            color: blue;
            background-color:rgba(0,0,0,0.1); /* 只是颜色透明  */
		</p>
		<div></div>
	</section>
	<section class="exa5">
		<p>
			rgba，
				在rgb的基础上多了一个a透明度数值，取值范围0~1，
				0为完全透明，1为完全不透明 
			hsl，
				H：Hue(色调)。
					0(或360)表示红色，
					120表示绿色，
					240表示蓝色，也可取其他数值来指定颜色。
					取值为：0 – 360，
				S：Saturation(饱和度)。取值为：0.0% - 100.0%，
				L：Lightness(亮度)。取值为：0.0% - 100.0%。 
		</p>
		<div>
		   H: <input id="iH" type="range" min="0" max="360" value='360'onchange="changeColor()"> <br>
	       S: <input id="iS" type="range" min="0" max="100" value='100'onchange="changeColor()"> <br>
	       L: <input id="iL" type="range" min="0" max="100" value='100'onchange="changeColor()"><br>
		</div>
	</section>
	<section class="exa6">
		<p>
			<strong>线性渐变</strong>
			 overflow: hidden;
            /*background:
                -webkit-linear-gradient(
                    top, !*4个方向 *!
                    red 20%,
                    black 50%,
                    yellow 100%
            );*/
            background:
                -webkit-linear-gradient(90deg,red 20%,black 50%,yellow 100%);
		</p>
		<div></div>
	</section>
	<section class="exa7">
		<p>
			<strong>线性渐变2</strong>
			var i=0;
			var box = document.querySelector('.exa7 div');
	        setInterval(function () {
	            i++;
	            /*box.style.background = '-webkit-linear-gradient('+i+'d' +
	             'eg,red 20' +
	             '%,black 50' +
	             '%,yello' +
	             'w 100%)';*/
	            box.style.background = '-webkit-linear-gradient('+i+'deg,
	                red 20%,
	                black 50%,
	                yellow 100%
	            )';
	        },13)
		</p>
		<div></div>
	</section>
	<section class="exa8">
		<p>
			<strong>多图线性渐变</strong>
			width: 400px;
            height: 400px;
            margin: 100px auto;
            background: -webkit-linear-gradient(
                0deg,
                greenyellow 5px,
                goldenrod 5px,
                rgba(0,0,0,0) 5px
                ),
                -webkit-linear-gradient(
                    90deg,
                    #3EFF6D 5px,
                    #3EFF6D 5px,
                    rgba(0,0,0,0) 5px
                );
            background-size:1em 1em;
		</p>
		<div></div>
	</section>
	<section class="exa9">
		<p>
		<strong>径向渐变</strong>
		div{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px dashed red;

        }
        #box1{
            background: -webkit-radial-gradient(
                    center,
                    100px 50%,
                    red 30px,
                    blue 60px,
                    black 100%
            );
        }
        #box2{
            background: -webkit-radial-gradient(
                    yellow ,
                    blue ,
                    black
            );
        }
        #box3{
            background: -webkit-radial-gradient(
                    yellow 30px,
                    blue 60px,
                    black 100%
            );
        }
        #box4{
            background: -webkit-radial-gradient(
                    purple,
                    gold,
                    green,
                    pink,
                    black,
                    blue,
                    purple,
                    gold,
                    green,
                    pink,
                    black,
                    blue
            );
        }
		</p>
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
	</section>
	<footer class='true'></footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		function changeColor() {
		           console.log(document.getElementById('iH').value);
		           var h = document.getElementById('iH').value;
		           var s = document.getElementById('iS').value;
		           var l = document.getElementById('iL').value;
		          document.querySelector('.exa5 div').style.background = 'hsl('+h+','+s+'%,'+l+'%)';
		       }
		var i=0;
		var box = document.querySelector('.exa7 div');
        setInterval(function () {
            i++;
            /*box.style.background = '-webkit-linear-gradient('+i+'d' +
             'eg,red 20' +
             '%,black 50' +
             '%,yello' +
             'w 100%)';*/
            box.style.background = '-webkit-linear-gradient('+i+'deg,\
                red 20%,\
                black 50%,\
                yellow 100%\
            )';
        },13)
	</script>
</body>
</html>